<template>
  <div class="home">
    <el-container>
      <el-aside width="200px">
        <el-row class="tac">
          <el-col :span="12">
            <h5>公司名称—Logo</h5>
            <el-menu
              default-active="0"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              router
              @select="click"
            >
              <el-submenu index="/">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>用户管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/">用户列表</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span slot="title">权限管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/rolelist">角色列表</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="/rightlist">权限列表</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-menu-item index="3">
                <template slot="title">
                  <i class="el-icon-document"></i>
                  <span slot="title">商品管理</span>
                </template>
              </el-menu-item>
              <el-menu-item index="4">
                <template slot="title">
                  <i class="el-icon-setting"></i>
                  <span slot="title">订单管理</span>
                </template>
              </el-menu-item>
              <el-menu-item index="5">
                <template slot="title">
                  <i class="el-icon-setting"></i>
                  <span slot="title">数据统计</span>
                </template>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header>
          <div>后台管理系统</div>
          <div>
            <button>退出</button>
          </div>
        </el-header>
        <el-main>
          <Breadcrumb :title1="title1" :title="title" />
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Breadcrumb from "../components/Breadcrumb";
export default {
  components: {
    Breadcrumb,
  },
  props: {},
  data() {
    return {
      title1: "用户管理",
      title: "用户列表",
    };
  },
  //事件处理器
  methods: {
    click(indexPath) {
      // console.log(indexPath);
      if (indexPath == "/") {
        this.title1 = "用户管理";
        this.title = "用户列表";
      } else if (indexPath == "/rightlist") {
        this.title1 = "权限管理";
        this.title = "权限列表";
      } else {
        this.title1 = "角色管理";
        this.title = "角色列表";
      }
    },
  },
  // 计算属性
  computed: {},
  //侦听器
  watch: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>
<style scoped>
/* @import url(); 引入css类 */
h5 {
  width: 12.5rem;
  height: 3.125rem;
  color: white;
  line-height: 3.125rem;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-aside {
  background-color: #0b0f2a;
  color: #333;
  text-align: center;
  /* line-height: 200px; */
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}
.el-aside >>> .el-menu-vertical-demo {
  width: 199px;
  background: #0b0f2a !important;
}
.el-aside >>> .el-submenu__title {
  background: #0b0f2a !important;
}
.el-aside >>> .el-submenu {
  background: #0b0f2a !important;
}
.el-aside >>> .el-menu {
  background: #0b0f2a !important;
}
.el-aside >>> .el-menu-item {
  background: #0b0f2a !important;
}
::-webkit-scrollbar {
  display: none;
}
</style>
